<template>
	<view class="container">
		<view class="top">
			<view class="message">
				从:{{fromData.location_id}}
			</view>
			<view class="message">
				序列号:{{fromData.lot_id}}
			</view>
			<view class="">
			</view>
			<view class="message">
				已预留:{{fromData.product_uom_qty}}
			</view>
			<view class="message">
				完成:{{fromData.qty_done}}
			</view>
			<view class="message">
				计量单位:{{fromData.product_uom_id}}
			</view>
		</view>

		<view class="picker-item">
			<picker @change="bindPickerChange" :value="index" :range="array" range-key="number">
				<view class="uni-input">{{ selectedNumber || '请选择序列号' }}</view>
			</picker>
		</view>
		
		<view class="done">
			<!-- 完成数量 -->
			<view class="">
				完成数量
			</view>
			<input class="input" type="text" v-model="from.qty_done" placeholder="完成数量">
		</view>
		
		<view class="btn-box">
			<view class="btn" @click="_labelSaveBtn()">
				完成
			</view>
		</view>
		
		
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		reactive,
		ref
	} from 'vue'

	import {
		getJiaohuoLineId,
		getLabeList,
		labelSaveBtn
	} from '@/api/jiaohuo.js'

	const id = ref('')
	const fromData = ref({})
	const labelList = ref([])
	const index = ref(0)
	const array = ref([])
	const selectedNumber = ref('')

	const from = reactive({
		record_id:'',
		lot_id:'', // 序列号
		qty_done:'' ,// 完成数量
		id:''
	})

	const _getJiaohuoLineId = () => {
		getJiaohuoLineId(id.value).then((res) => {
			console.log('详情', res);
			fromData.value = res.result
			if (res) {
				setTimeout(() => {
					_getLabeList()
				}, 300)
			}
		})
	}

	const _getLabeList = () => {
		getLabeList(fromData.value.move_line_id).then((res) => {
			console.log('类别列表', res);
			labelList.value = res.result.serial_list
			// 映射number到array
			array.value = labelList.value.map(item => ({
				number: item.number,
				id: item.serial_id
			}))
			// 设置默认选中第一个
			if (array.value.length > 0) {
				selectedNumber.value = array.value[0].number
				from.id = array.value[0].id
				
			}
		})
	}

	const bindPickerChange = (e) => {
		index.value = e.detail.value
		
		selectedNumber.value = array.value[index.value].number
		console.log(array.value);
		from.id = array.value[index.value].id
		
		// 这里可以获取选中的完整数据
		
		const selectedItem = labelList.value[index.value]
		console.log('选中数据:', selectedItem)
	}

	const _labelSaveBtn = () => {
		
		if (from.qty_done == '') {
			uni.showToast({
				title:'请输入完成数量'
			})
			return
		}
		
		from.record_id = id.value
		
		labelSaveBtn(from).then((res)=>{
			console.log('完成信息',res);
			
			if (res.result.status == '已保存') {
				uni.showToast({
					title:'已完成',
					icon:'success'
				})
			} else {
				uni.showToast({
					title:'失败',
					icon:'fail'
				})
			}
		})
	}
	
	onLoad((option) => {
		console.log(option);
		id.value = option.id
		_getJiaohuoLineId()
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F5F5;
		padding: 10px;
		min-height: 100vh;
		.top {
			background-color: white;
			padding: 10px;
			display: grid;
			gap: 10px;
			grid-template-columns: repeat(3, 1fr);
		}
		
		.picker-item {
			margin-top: 10px;
			padding: 10px;
			background-color: white;
		}
		
		.done {
			margin-top: 10px;
			padding: 10px;
			background-color: white;
			display: flex;
			justify-content: space-around;
			.input {
				padding: 4px;
				border-bottom: 1px solid gainsboro;
			}
		}
		
		.btn-box {
			margin-top: 10px;
			padding: 10px;
			background-color: white;
			.btn {
				background-color: #4C63E4;
				text-align: center;
				padding: 14px;
				border-radius: 10px;
				color: white;
			}
		}
	}
</style>